<template>
  <div id="goodat-space">
    <!-- 擅长空间 3选2选3 待完善-->
    <div class="tages-content bgwrite">
      <div class="top-bg">
        <van-nav-bar class="header"
                     fixed
                     :border="false"
                     @click-left="diffBack"
                     @click-right="confirmEdit">
          <div class="left"
               slot="left">
            <van-icon name="arrow-left"
                      size="24px"
                      color="#fff" />
          </div>
          <div class="title"
               slot="title">{{title}}</div>
          <div class="right"
               slot="right">完成</div>
        </van-nav-bar>
      </div>
      <div class="reset-wrapper">
        <div class="content-case">
          <van-checkbox-group v-model="resultType"
                              :max="vcgmax">
            <div v-for="(itemT, indext) in listType"
                 :key="indext">
              <van-checkbox :name="itemT.uid">
                <div slot="icon"
                     @click="change_type(itemT,indext)"><i class="van-icon van-icon-success"
                     style="">
                    <!----></i></div>
                <div @click="change_type(itemT,indext)">{{itemT.typeName}}</div>
              </van-checkbox>
              <div class="tabs"
                   style="width:100%">
                <div class="tab fz5"
                     v-for="(item,index) in itemT.childs"
                     :key="index"
                     @click="changetab(itemT,item.uid)"
                     :class="{'active':changelist.includes(item.uid)}"
                     v-cloak>{{item.typeName}}</div>
              </div>
            </div>
          </van-checkbox-group>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getuserUid } from "@/utils/auth.js";
import { mapState } from "vuex";
export default {
  components: {},
  data() {
    return {
      title: "擅长空间",
      resultType: [],
      listType: [],
      changelist: [],
      upList: [],
      vcgmax: 2
    };
  },
  computed: {
    ...mapState({ upListT: state => state.resumeTypesInfos })
  },
  created() {
    this.allProficiencyTypes();
    // console.log(this.upListT);
    if (this.upListT) {
      this.upListT.map(item => {
        console.log(this.upListT);
        this.resultType.push(item.typeUid);
        this.upList.push({ typeUid: item.typeUid, childs: [] });
        for (let i of item.childs) {
          this.changelist.push(i.typeUid);
          this.upList[this.upList.length - 1].childs.push({
            typeUid: i.typeUid
          });
        }
        // this.changelist.push(item.typeUid)
        //
      });
    }
  },
  methods: {
    diffBack() {
      this.$router.push("/performance/myIntroduction");
    },
    confirmEdit() {
      // 调取接口 返回 编辑简历页面 需要判断是否为空
      if (this.changelist.length < 1) {
        this.$toast({
          message: "没有标签呐 o(╥﹏╥)o"
        });
      } else {
        this.addResume();
      }
    },
    //获取列表
    async allProficiencyTypes() {
      const e = await HTTP("allProficiencyTypes");
      this.listType = e.data;
    },
    // 修改简历
    async addResume() {
      const SPC = await HTTP("addResume", {
        userUid: getuserUid(),
        createBy: getuserUid(),
        workYears: "",
        resumeStylesInfos: null,
        resumeTypesInfos: this.upList,
        resumeAreaInfos: null,
        workHistory: null,
        resumeSkillInfos: null
      });
      if (SPC.code == 200) {
        this.$router.push("/performance/myIntroduction");
        this.$toast("添加空间标签成功");
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },

    change_type(itemT) {
      let list = this.changelist; //赋值，用于视图刷新
      if (list.length == 6 && !this.resultType.includes(itemT.uid)) {
        this.vcgmax = this.resultType.length;
        this.$toast("总共只能选择6个小标签哦");
      } else {
        if (
          this.resultType.length == 2 &&
          !this.resultType.includes(itemT.uid)
        ) {
          this.$toast({ message: "只能选择2个大标签哦" });
        } else {
          !this.resultType.includes(itemT.uid) //检测是否包含大类id
            ? ((list, itemT) => {
                this.upList.push({ typeUid: itemT.uid, childs: [] });
                //判断剩下可选标签数量，并只取最大值3
                let j =
                  (6 - list.length >= 3 &&
                    ((itemT.childs.length >= 3 && 3) || itemT.childs.length)) ||
                  6 - list.length;
                //自动选大类中子类前三项
                for (let i = 0; i < j; i++) {
                  list.push(itemT.childs[i].uid);
                  this.upList[this.upList.length - 1].childs.push({
                    typeUid: itemT.childs[i].uid
                  });
                }
                this.changelist = list;
              })(list, itemT)
            : ((list, itemT) => {
                //清楚取消的id
                for (let i in this.upList) {
                  if (itemT.uid == this.upList[i].typeUid) {
                    this.upList.splice(i, 1);
                  }
                }
                itemT.childs.map(item => {
                  list.includes(item.uid) &&
                    list.splice(list.findIndex(id => id == item.uid), 1);
                });
                this.changelist = list;
              })(list, itemT);
          this.vcgmax = this.upList.length;
        }
      }
    },
    changetab(itemT, id) {
      if (
        !(this.resultType.length == 2 && !this.resultType.includes(itemT.uid)) //判断只能2个大类
      ) {
        //判断只能有6个标签
        if (this.changelist.length < 6) {
          //根据大标签是否包含id做处理
          this.resultType.includes(itemT.uid) ||
            (this.resultType.push(itemT.uid),
            //建立上传数组初模型
            this.upList.push({ typeUid: itemT.uid, childs: [] }));
          let list = this.changelist; //赋值，用于刷新视图
          ((itemT, id, list) => {
            list.includes(id) //判断小标签是否包含此id,是就删除，否就加入
              ? ((itemT, list, id) => {
                  list.splice(list.findIndex(item => item === id), 1);
                  for (let i in this.upList) {
                    if (this.upList[i].typeUid == itemT.uid) {
                      this.upList[i].childs.splice(
                        list.findIndex(item => item.id == id),
                        1
                      );
                      //通过上传数组判断大标签里的小标签列表是否为空数组，为空则删除
                      this.upList[i].childs.length > 0 ||
                        (this.resultType.splice(
                          this.resultType.findIndex(item => item == itemT.uid),
                          1
                        ),
                        this.upList.splice(i, 1));
                    }
                  }
                })(itemT, list, id)
              : ((itemT, list, id) => {
                  list.push(id);
                  for (let i in this.upList) {
                    //将数据加入上传数组
                    if (this.upList[i].typeUid == itemT.uid) {
                      this.upList[i].childs.push({ typeUid: id });
                    }
                  }
                })(itemT, list, id);
          })(itemT, id, list);
        } else if (this.changelist.length >= 6) {
          let list = this.changelist;
          ((id, list) => {
            list.includes(id)
              ? ((itemT, list, id) => {
                  list.splice(list.findIndex(item => item === id), 1);
                  for (let i in this.upList) {
                    if (this.upList[i].typeUid == itemT.uid) {
                      this.upList[i].childs.splice(
                        list.findIndex(item => item.id == id),
                        1
                      );
                      this.upList[i].childs.length > 0 ||
                        (this.resultType.splice(
                          this.resultType.findIndex(item => item == itemT.uid),
                          1
                        ),
                        this.upList.splice(i, 1));
                    }
                  }
                })(itemT, list, id)
              : this.$toast({ message: "总共只能选择6个小标签哦" });
          })(id, list);
        }
      } else {
        this.$toast({ message: "只能选择2个大标签哦" });
      }
    }
  }
};
</script>
<style>
</style>

<style lang="scss" scoped>
#goodat-space {
  position: absolute;
  width: 100%;
  height: 100%;
  .tages-content {
    position: relative;
    width: 100%;
    height: 100%;
    .top-bg {
      width: 100%;
      background: #fff;
      border-bottom-left-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      .header {
        background: #5e8efe;
        color: #ffffff;
        height: 0.92rem;
        .title {
          color: #ffffff;
          font-size: 0.35rem;
        }
        .right {
          font-size: 0.32rem;
          height: 0.92rem;
          line-height: 1rem;
        }
      }
    }
    .reset-wrapper {
      position: fixed;
      width: 100%;
      top: 0.92rem;
      left: 0;
      right: 0;
      overflow-y: scroll;
      bottom: 0rem;
      .content-case {
        box-sizing: border-box;
        padding: 0.4rem 0.24rem;
        .icontit {
          min-width: 4rem;
          display: flex;
          align-items: center;
          .title {
            margin-left: 0.15rem;
          }
        }
        .tabs {
          min-width: 4rem;
          margin-top: 0.15rem;
          .tab {
            display: inline-block;
            margin-right: 0.24rem;
            width: 1.98rem;
            text-align: center;
            height: 0.7rem;
            line-height: 0.7rem;
            border-radius: 0.1rem;
            margin-bottom: 0.24rem;
            background: #f5f5f5;
            color: #282828;
            font-size: 0.28rem;

            &:nth-child(3n + 3) {
              margin-right: 0;
            }
          }
          .active {
            display: inline-block;
            margin-right: 0.24rem;
            width: 1.98rem;
            text-align: center;
            height: 0.7rem;
            line-height: 0.7rem;
            border-radius: 0.1rem;
            margin-bottom: 0.24rem;
            background: #5e8efe;
            color: #fff;
            font-size: 0.28rem;
            &:nth-child(3n + 3) {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>
